import React from 'react';
import styled from 'styled-components';

interface IProps {
    imgSrc: string;
    title: string;
    description: JSX.Element;
}

const TipsHeaderWrapper = styled.div`
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .description {
        font-size: 16px;
    }
`;

const TipsHeader = (props: IProps) => {
    const { imgSrc, title, description } = props;
    return (
        <TipsHeaderWrapper>
            <div>
                <h1>{title}</h1>
                <div className="description">{description}</div>
            </div>
            <img src={imgSrc} alt="" width="600" height="400"></img>
        </TipsHeaderWrapper>
    )
};
 
export default TipsHeader;
